import { useState } from 'react'
import { WhiteSpace } from 'antd-mobile'
import { Icon, message } from 'antd'
import styles from './index.scss'

const list = [
  { id: 'uiywoeqwe', date: '2020-06-23 13:58', place: '海淀社保上地分中心', status: '待激活' },
  { id: 'uiywoe3424qwe', date: '2020-06-23 13:58', place: '海淀社保上地分中心', status: '待激活' },
  { id: '3342', date: '2020-06-23 13:58', place: '海淀社保上地分中心', status: '待激活' },
  { id: 'uiyw3423oeqwe', date: '2020-06-23 13:58', place: '海淀社保上地分中心', status: '待激活' }
]
const Index = () => {
  return (
    <div className={styles.wait}>
      <WhiteSpace />
      <div className={styles.title}>我的预约</div>
      {
        list.map(i => <Card_ {...i} className={styles.card} key={i.id} />)
      }
    </div>
  )
}

const Card_ = ({ date, place, status }) => {
  const [loading, setLoading] = useState()

  const onActiveClick = () => {
    setLoading(true)
    setTimeout(() => {
      message.success('激活成功')
      setLoading(false)
    }, 1000)
  }

  return (
    <div className={styles.flex}>
      <div className={styles.code}>
        <img src='https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3164468217,2359493916&fm=11&gp=0.jpg' />
      </div>
      <div className={styles.content}>
        <div className={styles.item}>
          <div><Icon type="unordered-list" className={styles.icon} />社保业务 - 综合受理</div>
          <div>预约时间：<span>{date}</span></div>
          <div>预约网点：{place}</div>
          <div>预约状态：<span>{status}</span></div>
        </div>
        <div className={styles.active} onClick={onActiveClick}>
          <a disabled={loading}>激活</a>
        </div>
      </div>
    </div>
  )
}

export default Index
